/*
 * @Author: wangtao
 * @Date: 2020-06-28 15:43:56
 * @LastEditors: 汪滔
 * @LastEditTime: 2021-08-10 18:20:24
 * @Description: 货车详情
 */

import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  Text,
  Image,
  ScrollView,
  TouchableOpacity,
  NativeModules,
  SafeAreaView,
} from 'react-native';
import {
  mainBgColorLightGray,
  mainBgColorWhite,
  priceColor,
  fontColorBlack,
  fontColorLightGray,
  fontColorCoffee,
  screenWidth,
  px2dp,
  fontColorSecDeepGray,
} from '@/styles';
import { Button, msg, _, XMImage } from '@/common';
import {
  returnIntegral,
  returnIntegralWord,
  iconLeft,
  iconMore,
  iconRightGray,
} from '@/images';
import { featchCarDetailImg } from '@/api/truck';
import ChooseItem from './choose-item';
import CarImgItem from './car-img-item';
import EmptyPage from '../../../../components/EmptyPage';

export default class CarImg extends Component {
  constructor(props) {
    super(props);
    this.state = {
      carImgDetail: {},
      activeKey: 0,
      activeGoodsSubgraphCateVOS: [], // 激活时的图片列表
      isLoading: true
    };
  }

  componentDidMount() {
    const { goodsId } = this.props;
    // 4028828c73eb90bd0173eb96b5300000
    this.init(goodsId);
  }

  render() {
    const { carImgDetail, activeKey, activeGoodsSubgraphCateVOS, isLoading } = this.state;
    const { name, details, picFileId, goodsSubgraphCateVOS } = carImgDetail;
    return (
      <ScrollView showsVerticalScrollIndicator={false}>
        <View style={styles.container}>
          <View style={styles.titleContainer}>
            <TouchableOpacity onPress={() => { }} style={styles.titleImg}>
              <XMImage src={picFileId} />
            </TouchableOpacity>
            <View style={styles.carTitleRight}>
              <Text style={styles.carTitle} numberOfLines={1}>
                {name}
              </Text>
              <Text style={styles.carDetail} numberOfLines={3}>
                {details}
              </Text>
            </View>
          </View>
          {
            !isLoading ?
              activeGoodsSubgraphCateVOS.length > 0 ?
                <View style={styles.contentContainer}>
                  <View style={styles.scroll}>
                    <ScrollView
                      showsHorizontalScrollIndicator={false}
                      horizontal
                    >
                      <ChooseItem
                        style={{ marginRight: px2dp(24) }}
                        text='全部'
                        key={0}
                        id={0}
                        activeKey={activeKey}
                        onChangeCate={(id) => this.onChangeCate(id)}
                      />
                      {!!goodsSubgraphCateVOS &&
                        goodsSubgraphCateVOS.map((item) => {
                          return (
                            <ChooseItem
                              style={{ marginRight: px2dp(24) }}
                              text={item.name}
                              key={item.id}
                              id={item.id}
                              activeKey={activeKey}
                              onChangeCate={(id) => this.onChangeCate(id)}
                            />
                          );
                        })}
                    </ScrollView>
                  </View>
                  {!!activeGoodsSubgraphCateVOS &&
                    activeGoodsSubgraphCateVOS.map((goodsSubgraphCateVO) => {
                      return (
                        <CarImgItem
                          goodsSubgraphCateVO={goodsSubgraphCateVO}
                          key={goodsSubgraphCateVO.id}
                          id={goodsSubgraphCateVO.id}
                          activeKey={activeKey}
                          onChangeCate={(id) => this.onChangeCate(id)}
                        />
                      );
                    })}
                </View> : <EmptyPage noText='暂无图片' />
              : null
          }
        </View>
      </ScrollView>
    );
  }

  // 初始化
  init = (goodsId) => {
    featchCarDetailImg({ goodsId }).then((res) => {
      this.setState({ isLoading: false });
      if (res.success) {
        this.setState({
          carImgDetail: res.data,
          activeGoodsSubgraphCateVOS: res.data.goodsSubgraphCateVOS,
        });
      } else {
        msg.emit('app:tip', { text: res.msg });
      }
    });
  };

  // 切换
  onChangeCate = (id) => {
    const { carImgDetail } = this.state;
    const { goodsSubgraphCateVOS } = carImgDetail;
    let activeGoodsSubgraphCateVOS = goodsSubgraphCateVOS.filter((item) => {
      return item.id == id;
    });
    if (id === 0) {
      activeGoodsSubgraphCateVOS = goodsSubgraphCateVOS;
    }
    this.setState({ activeKey: id, activeGoodsSubgraphCateVOS });
  };
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    backgroundColor: mainBgColorLightGray,
    marginTop: px2dp(24)
  },
  titleContainer: {
    width: screenWidth,
    height: px2dp(198),
    backgroundColor: mainBgColorWhite,
    paddingVertical: px2dp(24),
    paddingHorizontal: px2dp(32),
    flexDirection: 'row',
  },
  titleImg: {
    width: px2dp(200),
    height: px2dp(150),
    borderRadius: px2dp(8),
    overflow: 'hidden'
  },
  carTitleRight: {
    marginLeft: px2dp(24),
    flex: 1,
  },
  carTitle: {
    fontSize: px2dp(32),
    color: fontColorBlack,
    fontWeight: 'bold',
  },
  carDetail: {
    fontSize: px2dp(26),
    color: fontColorSecDeepGray,
    marginTop: 2,
  },
  contentContainer: {
    width: screenWidth,
    marginTop: px2dp(24),
    paddingVertical: px2dp(24),
    paddingHorizontal: px2dp(32),
    backgroundColor: mainBgColorWhite,
  },
  scroll: {
    flexDirection: 'row',
  },
  listItem: {
    marginTop: px2dp(40),
  },
  listHeader: {
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  listTitle: {
    fontSize: px2dp(32),
    fontWeight: 'bold',
    color: fontColorBlack,
  },
  listNum: {
    fontSize: px2dp(28),
    fontWeight: 'normal',
    color: fontColorSecDeepGray,
    marginLeft: px2dp(16),
  },
  more: {
    fontSize: px2dp(28),
    fontWeight: 'normal',
    color: fontColorSecDeepGray,
  },
  imgList: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    flexWrap: 'wrap',
  },
  imgItem: {
    width: px2dp(214),
    height: px2dp(160),
    marginTop: px2dp(24),
  },
  imgNull: {
    width: px2dp(214),
    height: 0,
    marginTop: px2dp(24),
  },
});
